<template>
  <div>
    <top-area></top-area>
    <div  id="map"></div>
    <router-view></router-view>
    <div class="btn">
      <button @click="handleDirection" >导航</button>
    </div>
    <bottom-area></bottom-area>
  </div>
</template>

<script setup>
import TopArea from './components/TopArea.vue'
import BottomArea from './components/BottomArea.vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import  {Scene} from '@antv/l7'
import { Mapbox } from '@antv/l7-maps'
import { onMounted, ref ,provide} from 'vue'
import useControls from './hooks/useControls.js'
import MapboxDirection from "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions";
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'
const MAPBOX_TOKEN =
  'pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA'
let map = ref(null),
  scene = ref(null)
let isDirection = ref(false)
let direction = new MapboxDirection({
  accessToken: MAPBOX_TOKEN,
})


onMounted(() => {
  mapboxgl.accessToken = MAPBOX_TOKEN
  map.value = new mapboxgl.Map({
    container: 'map',
    style:  'mapbox://styles/mapbox/dark-v11',
    center: [114.29, 30.59],
    zoom: 1,
    projection: 'globe'
  })
  scene.value = new Scene({
    id: 'map',
    map:new Mapbox({
      mapInstance:map.value,
    }),
    logoVisible:false
  })
  // 添加雾化效果
  function fog(){
    let center = map.value.getCenter()
    map.value.setFog({
      color:`hsl(0,0%,${Math.abs(center.lng/360)})`,
      'high-fog-color':`hsl(0,0%,${Math.abs(center.lat/360)})`,
    })
  }
  map.value.on('move',fog)
  // 添加L7组件
  useControls(scene.value,map.value)
  // map和scene要在子组件中使用，所以要将map和scene传递给子组件
  provide('mapScene',{map:map.value,scene:scene.value})
})
function handleDirection(){
isDirection.value = !isDirection.value
if (!isDirection.value) {
  map.value.addControl(direction, 'top-left')

}else{
  map.value.removeControl(direction)
}
}
</script>

<style lang="scss" scoped>
#map {
  height: 100vh;
  width: 100%;
}
.btn{
  position: fixed;
  top: 200px;
  left: 10px;
  button{
    padding: 10px 20px;
  }
}
</style>
